import React, { useEffect, useState } from 'react';

const Test1: React.FC = () => {
  const [num, setNum] = useState(0);

  useEffect(() => {
    console.log('@1', num);
  });

  useEffect(() => {
    console.log('@2', num);
  }, []);

  useEffect(() => {
    console.log('@3', num);
  }, [num]);

  useEffect(() => {
    return () => {
      console.log('@4', num);
    };
  });
  const handle = () => {
    setNum(num + 1);
  };
  return (
    <>
      <div>{num}</div>
      <button onClick={handle}>点击+1</button>
    </>
  );
};
export default Test1;

/*
useEffect:模拟生命周期
常见四种形式：
①useEffect(callback) 没设置参数二。
  1 组件挂载成功之后执行callback(componentDidMount)
  2 组件每一次更新完毕后执行callback(componentDidUpdate)、
②useEffect( callback，[ ] ) 参数二为空数组。
  1 只有在组件挂载成功之后执行callback(componentDidMount)
③useEffect( callback , [依懒的状态(多个状态) ] )
  1 只有在组件挂载成功之后执行callback(componentDidMount)
④useEffect(()=>{ return () =>{} }) 
  1 组件每一次更新完毕后会执行上一次return的小函数(componentDidUpdate)
  2 return的小函数在组件卸载的时候执行(componentWillUnmount)
  */
